<template>
        <div class="Video_B" v-if="imgArr">
            <!-- 登录 -->
            <login class="login" > </login>
            <!-- 播放按钮 -->
            <!-- <SmallPlay class="SmallPlay"></SmallPlay> -->
            <!-- 顶部 -->
            <div class="top">
                <i class="iconfont icon-caidan" @click="login"></i>
                <h2>视频</h2>
            </div>
            <!-- 主体 -->
            <div class="commont">
              <!-- 轮播 -->
              <Swiper  :autoPlay="true" >
                <Slide v-if="id<6" v-for="(item, id) in imgArr" :key="id" >
                  <div class="imgBox"   @click="watchMv(item.videoId,item)">
                        <img :src="item.bigHeadImg" alt="" >
                  </div>
                </Slide>
              </Swiper> 
              <!--功能  -->
              <funct class="funct"></funct>
              <!-- 视屏列表 -->
              <video_list></video_list>
            </div>
            <!-- 底部 -->
            <div class="footer">
                <ul>
                  <li>
                    <div class="liBox" @click="Find">
                      <p><i class="iconfont icon-changpian"></i></p>
                      <p>发现</p>
                    </div>
                    
                  </li>
                  <li>
                    <div class="liBox"  @click="listen">
                      <p><i class="iconfont icon-yinle"></i></p>
                      <p>随心听</p>
                    </div>
                    
                  </li>
                  <li >
                    <div class="liBox impo">
                      <p class="impo"><i class="iconfont icon-shipin"></i></p>
                      <p class="impo">视频</p>
                    </div>
                  </li>
                  <li>
                    <div class="liBox"  @click="mymusic">
                      <p><i class="iconfont icon-yinleyinfujiezou"></i></p>
                      <p>我的音乐</p>
                    </div>
                  </li>
                </ul>
            </div>
        </div>
</template>
<script>
import { Swiper, Slide } from "vue-swiper-component";
import jsonp from "jsonp";
import funct from "../components/Funct";
import video_list from "../components/video_list";
import login from "../components/login";
// import SmallPlay from "../components/SmallPlay";
export default {
  name: "Video",
  data() {
    return {
      imgArr: JSON.parse(sessionStorage.getItem("imgArr"))
      // imgArr: []
    };
  },

  computed: {
    
  },
  methods: {
    watchMv(videoId, item) {
      this.$router.push("/Mv_play/" + videoId); //路由
      this.$store.commit("agemv", item);
      this.$store.commit("ageisplayicon", false); //媒体播放冲突

    },
    login() {
      document.querySelector(".login").style.transform = "translateX(0)";
      document.querySelector(".loginBox").style.opacity = "1";
    },
    // 路由发现
    Find(){
        this.$router.push({ name: "Find" })
    },
    // 路由随心听
    listen(){
        this.$router.push('/Listen')
    },
    // 路由我的音乐
    mymusic(){
        this.$router.push('/mymusic')
    }
  },
  components: {
    Swiper,
    Slide,
    funct,
    video_list,
    login,
    // SmallPlay
  },

  created() {
    if (this.imgArr) {
      return;
    }
    jsonp(
      "http://uapi.yinyuetai.com/i/mv/favorite-list?uid=56988303&order=new&gid=&page=1&pageSize=3000",
      null,
      (err, res) => {
        if (!err) {
          // console.log(res);
          this.imgArr = res.videos;
          sessionStorage.setItem("imgArr", JSON.stringify(res.videos));
        } else {
          console.log(err);
        }
      }
    );
  }
};
</script>


<style lang='scss'>
html,
body {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.Video_B {
  width: 100%;
  height: 100%;
  position: relative;
  background: #f1f1f1;
 
  .login {
    transform: translateX(-100%);
    position: absolute;
    left: 0;
    top: 0;
    z-index: 100;
  }
  .top {
    height: 8%;
    background: #22c5bd;
    color: #fff;
    position: relative;
    i {
      position: absolute;
      left: 0.35rem;
      top: 0.4rem;
      font-size: 0.8rem;
    }
    h2 {
      font-size: 0.5rem;
      text-align: center;
      font-weight: normal;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
  }
  .commont {
    width: 100%;
    height: 82%;
    overflow: auto;
    // 轮播
    .wh_content {
      width: 100%;
      height: 4.3rem;
      .imgBox {
        position: relative;
        width: 100%;
        height: 100%;
        overflow: hidden;
        img {
          width: 100%;
        }
      }
    }
    // 轮播指示图标
    .wh_indicator {
      font-size: 0px;
      .wh_indicator_item {
        height: 3px;
        margin: 1px 3px;
      }
    }
    .funct {
      height: 3rem;
    }
  }
  // 底部
  .footer {
    width: 100%;
    height: 10%;
    background: #fff;

    ul {
      width: 100%;
      height: 100%;

      li {
        display: inline-block;
        width: 25%;
        height: 100%;
        position: relative;
        .liBox {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          width: 100%;

          p {
            text-align: center;
            font-size: 0.25rem;
            color: #999999;
            margin-top: 0.2rem;
          }
          i {
            font-size: 0.55rem;
          }
          .impo {
            color: #22c5bd;
          }
        }
      }
    }
  }
}
</style>
